<!DOCTYPE html>
<html>
<head>
  <title>OSS in Browser</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.bundle.js"></script>
</head>
<body>
  <div id="main">
    <div class="page-header">
      <h1>OSS <small>in</small>Browser</h1>
    </div>
    <table>
      <tr>
        <td>
          <div class="panel panel-primary">
            <div class="panel-heading">Upload file</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Select file</label>
                  <input type="file" id="file"/>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-file" value="object" />
                </div>
                <div class="upload-operation">
                  <div class="form-group" style="float: left">
                    <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
                  </div>
                  <div class="form-group" style="margin-left: 60px" >
                    <input type="button" class="btn btn-primary" id="file-button-stop" value="Stop" />
                  </div>
                  <div class="progress">
                    <div id="progress-bar"
                         class="progress-bar"
                         role="progressbar"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100" style="min-width: 2em;">
                      0%
                    </div>
                  </div>
                </div>
              </form>
              <br />
            </div>
          </div>
        </td>

        <td>
          <div class="panel panel-success">
            <div class="panel-heading">Upload content</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Content</label>
                  <textarea class="form-control" id="file-content" rows="3">Hello, OSS!</textarea>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-content" value="object" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="content-button" value="Save" />
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="panel panel-success">
            <div class="panel-heading">Upload Blob</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Content</label>
                  <textarea class="form-control" id="file-blob" rows="3">Hello, OSS! I am a Blob!</textarea>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-blob" value="blob" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="blob-button" value="Save" />
                </div>
              </form>
            </div>
          </div>
        </td>

        <td>
          <div class="panel panel-success">
            <div class="panel-heading">PUT Object with signaturedUrl</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Content</label>
                  <textarea class="form-control" id="put-blob" rows="3">Hello, OSS! I am a Blob!</textarea>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="object-key-put-blob" value="blob" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="put-blob-button" value="Save" />
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="panel panel-danger">
            <div class="panel-heading">Upload with base64 img</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Base64 Content</label>
                  <textarea class="form-control" id="base64-file-content" rows="3"></textarea>
                </div>
                <div class="form-group">
                  <label>Store as</label>
                  <input type="text" class="form-control" id="base64-object-key-file" value="object" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="base64-file-button" value="Upload" style="float: left"/>
                  <div class="progress">
                    <div id="base64-progress-bar"
                         class="progress-bar"
                         role="progressbar"
                         aria-valuenow="0"
                         aria-valuemin="0"
                         aria-valuemax="100" style="min-width: 2em;">
                      0%
                    </div>
                  </div>
                </div>
              </form>
              <br />

            </div>
          </div>
        </td>
        <td>
          <div class="panel panel-warning">
            <div class="panel-heading">Download file</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <label>Object key</label>
                  <input type="text" class="form-control" id="dl-object-key" value="object" />
                </div>
                <div class="form-group">
                  <label>Save as</label>
                  <input type="text" class="form-control" id="dl-file-name" value="filename" />
                </div>
                <div class="form-group">
                  <input type="button" class="btn btn-primary" id="dl-button" value="Download" />
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="panel panel-info">
            <div class="panel-heading">List files</div>
            <div class="panel-body">
              <table class="table table-striped" id="list-files-table">
                <tr>
                  <th>Key</th>
                  <th>Size</th>
                  <th>LastModified</th>
                </tr>
              </table>
              <input type="button" class="btn btn-primary" id="list-files-button" value="Refresh" />
            </div>
          </div>
        </td>
        <td>
          <div class="panel panel-success">
            <div class="panel-heading">Custom Domain Usage</div>
            <div class="panel-body">
              <form action="" class="form-horizontal">
                <div class="form-group">
                  <input type="text" class="form-control" id="key-cname" placeholder="Please Input Cname!" />
                  <label>object name to download</label>
                  <input type="text" class="form-control" id="key-cname-objectName" value="cnameObject" />
                  <div>
                  <input type="button" class="btn btn-primary" id="key-cname-button" value="Save" />
                  </div>
                </div>
              </form>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          Powered by
          <a href="https://www.aliyun.com/product/oss">OSS</a> &
          <a href="https://github.com/ali-sdk/ali-oss">ali-oss</a></td>
      </tr>
    </table>
  </div>
</body>
</html>
